<template>
    <!--  外框架-->
    <div class="framework1">
        <!--      内框架-->
        <div class="framework2">
            <div class="top-class-table">
                <div class="header">
                    <div style="margin-left: 10px;font-weight: bold">辖区管理->辖区单位</div>
                </div>
                <!--      按钮行-->
                <div class="button_group">
                    <el-button-group v-if="permissionIsShow.add">
                        <el-button type="primary" @click="addPlace()">新增辖区单位</el-button>
                        <el-button type="primary" @click="importPlace()">导入辖区单位</el-button>
                        <el-button type="primary" @click="downloadImportTemplate()">下载导入模版</el-button>
                    </el-button-group>
                    <el-select v-model="typeId" placeholder="请选择经营类别" style="width: 250px;margin-left: 15px;" clearable>
                        <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id" />
                    </el-select>
                    <el-input v-model="search" placeholder="单位名称、地址、营业执照号"
                        style="width: 250px;margin-left: 15px;margin-right: 15px" clearable></el-input>
                    <el-button type="primary" icon="Search" @click="reqPlaceData()">搜索</el-button>
                </div>

                <!--      表格-->
                <div style="height: calc(100vh - 134px)">
                    <el-table :data="placeData" :row-style="{ height: '47px' }"
                        style="width: 100%;height:calc(100% - 68px)" :header-cell-style="{ background: '#f4f3f9' }">
                        <el-table-column prop="typeName" label="所属类别" width="200" align="center" />
                        <el-table-column prop="companyName" label="单位名称" width="220" align="center" />
                        <el-table-column prop="companyAddress" label="地址" width="220" align="center" />
                        <el-table-column prop="companyLicense" label="信用代码或营业执照号" width="200" align="center" />
                        <el-table-column prop="enterpriseType" label="企业类型" width="200" align="center" />
                        <el-table-column prop="businessNature" label="经营范围" width="200" align="center" />
                        <el-table-column label="营业执照图片" width="300" align="center">
                            <!-- 图片 -->
                            <template #default="scope">
                                <img :src="scope.row.companyLicenseImage"
                                    @click="previewImage(scope.row.companyLicenseImage)"
                                    style="max-height: 300px; max-width: 80%;">
                            </template>
                        </el-table-column>
                        <el-table-column prop="legalPerson" label="法定代表人" width="200" align="center" />
                        <el-table-column prop="legalPersonPosition" label="法定代表人职务" width="200" align="center" />
                        <el-table-column prop="legalPersonPhone" label="法定代表人联系方式" width="200" align="center" />
                        <!-- <el-table-column label="法定代表人信息图片" width="300" align="center">
                            <template #default="scope">
                                <img :src="scope.row.legalPersonImage" @click="previewImage(scope.row.legalPersonImage)"
                                    style="max-height: 300px; max-width: 80%;">
                            </template>
                        </el-table-column> -->
                        <el-table-column prop="responsePerson" label="负责人" width="200" align="center" />
                        <el-table-column prop="responsePersonPhone" label="负责人联系方式" width="200" align="center" />
                        <!-- <el-table-column label="负责人信息图片" width="300" align="center">
                            <template #default="scope">
                                <img :src="scope.row.responsePersonImage"
                                    @click="previewImage(scope.row.responsePersonImage)"
                                    style="max-height: 300px; max-width: 80%;">
                            </template>
                        </el-table-column> -->
                        <el-table-column prop="houseOwnership" label="房屋权属" width="200" align="center">
                            <template #default="scope">
                                {{ scope.row.houseOwnership == 1 ? '自有' : scope.row.houseOwnership == 2 ? '租赁' : '' }}
                            </template>
                        </el-table-column>
                        <el-table-column label="房产证明图片" width="300" align="center">
                            <template #default="scope">
                                <img :src="scope.row.houseOwnershipImage"
                                    @click="previewImage(scope.row.houseOwnershipImage)"
                                    style="max-height: 300px; max-width: 80%;">
                            </template>
                        </el-table-column>
                        <el-table-column prop="houseArea" label="建筑面积" width="200" align="center" />
                        <el-table-column prop="housePlie" label="建筑层数" width="200" align="center" />
                        <el-table-column label="房屋正面照" width="300" align="center">
                            <template #default="scope">
                                <img :src="scope.row.houseFullImage" @click="previewImage(scope.row.houseFullImage)"
                                    style="max-height: 300px; max-width: 80%;">
                            </template>
                        </el-table-column>
                        <el-table-column fixed="right" label="操作" width="200" align="center"
                            v-if="permissionIsShow.edit || permissionIsShow.delete">
                            <template #default="scope">
                                <el-button type="primary" size="small" icon="Edit" @click="editPlace(scope.row.id)"
                                    v-if="permissionIsShow.edit">编辑</el-button>
                                <el-button type="danger" size="small" icon="Delete" @click="deletePlace(scope.row.id)"
                                    v-if="permissionIsShow.delete">删除</el-button>
                                <el-button type="primary" size="small" icon="Edit" @click="resetPassword(scope.row)"
                                    v-if="permissionIsShow.resetPassword">重置密码</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <!--        页数导航栏-->
                    <div class="footer">
                        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                            :page-sizes="[5, 10]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
                            :total="total">
                        </el-pagination>
                    </div>
                </div>
            </div>
        </div>

        <!--       新增地点-->
        <el-dialog v-model="disvisable1" :before-close="handleClose" :title="isEdit ? '修改' : '新增'" width="40%"
            align-center :style="{ maxHeight: '85vh', overflow: 'hidden' }">
            <el-form label-position="left" :model="placeForm" :rules="rules" ref="placeForm" label-width="25%"
                :style="{ maxHeight: 'calc(90vh - 120px)', overflowY: 'auto', }">
                <el-form-item label="经营类别" prop="placeType">
                    <el-select v-model="placeForm.placeType" filterable allow-create placeholder="请选择经营类别"
                        style="width: 100%;" @change="handlePlaceTypeChange" @blur="handlePlaceTypeBlur">
                        <el-option v-for="option in options" :value="option.id" :key="option.id" :label="option.name" />
                    </el-select>
                </el-form-item>
                <el-form-item label="单位名称" prop="companyName">
                    <el-input v-model="placeForm.companyName" autocomplete="off" placeholder="请输入单位名称" />
                </el-form-item>
                <el-form-item label="单位地址" prop="companyAddress">
                    <el-input v-model="placeForm.companyAddress" placeholder="请输入单位地址" />
                </el-form-item>
                <el-form-item label="企业类型" prop="enterpriseType">
                    <el-select v-model="placeForm.enterpriseType" placeholder="请选择企业类型" style="width: 100%;">
                        <el-option label="法人和其他组织" value="法人和其他组织" />
                        <el-option label="个体工商户" value="个体工商户" />
                    </el-select>
                </el-form-item>
                <el-form-item label="信用代码或营业执照号" prop="companyLicense">
                    <el-input v-model="placeForm.companyLicense" placeholder="请输入信用代码或营业执照号" />
                    <div class="el-dialog-image">
                        <img :src="placeForm.companyLicenseImage" style="max-height: 98%; max-width: 98%;">
                    </div>
                    <el-button @click="uploadImage('companyLicenseImage')" type="primary">上传营业执照图片</el-button>
                </el-form-item>
                <el-form-item label="经营范围" prop="businessNature">
                    <el-input v-model="placeForm.businessNature" placeholder="请输入经营范围" />
                </el-form-item>
                <el-form-item label="法定代表人" prop="legalPerson">
                    <el-input v-model="placeForm.legalPerson" placeholder="请输入法定代表人" />
                    <!-- <div class="el-dialog-image">
                        <img :src="placeForm.legalPersonImage" style="max-height: 98%; max-width: 98%;">
                    </div>
                    <el-button @click="uploadImage('legalPersonImage')" type="primary">上传法定代表人信息图片</el-button> -->
                </el-form-item>
                <el-form-item label="代表人联系方式" prop="legalPersonPhone">
                    <el-input v-model="placeForm.legalPersonPhone" placeholder="请输入代表人联系方式" />
                </el-form-item>
                <el-form-item label="法定代表人职务" prop="legalPersonPosition">
                    <el-input v-model="placeForm.legalPersonPosition" placeholder="请输入法定代表人职务" />
                </el-form-item>
                <el-form-item label="负责人" prop="responsePerson">
                    <el-input v-model="placeForm.responsePerson" placeholder="请输入负责人" />
                    <!-- <div class="el-dialog-image">
                        <img :src="placeForm.responsePersonImage" style="max-height: 98%; max-width: 98%;">
                    </div>
                    <el-button @click="uploadImage('responsePersonImage')" type="primary">上传负责人信息图片</el-button> -->
                </el-form-item>
                <el-form-item label="负责人联系方式" prop="responsePersonPhone">
                    <el-input v-model="placeForm.responsePersonPhone" placeholder="请输入负责人联系方式" />
                </el-form-item>
                <el-form-item label="房屋权属" prop="houseOwnership">
                    <el-select v-model="placeForm.houseOwnership" placeholder="请选择房屋权属" style="width: 100%;">
                        <el-option label="自有" value="1">自有</el-option>
                        <el-option label="租赁" value="2">租赁</el-option>
                    </el-select>
                    <div class="el-dialog-image">
                        <img :src="placeForm.houseOwnershipImage" style="max-height: 98%; max-width: 98%;">
                    </div>
                    <el-button @click="uploadImage('houseOwnershipImage')" type="primary">上传房产证明图片</el-button>
                </el-form-item>
                <el-form-item label="建筑面积" prop="houseArea">
                    <el-input v-model="placeForm.houseArea" placeholder="请输入建筑面积" />
                </el-form-item>
                <el-form-item label="建筑层数" prop="housePlie">
                    <el-input v-model="placeForm.housePlie" placeholder="请输入建筑层数" />
                    <div class="el-dialog-image">
                        <img :src="placeForm.houseFullImage" style="max-height: 98%; max-width: 98%;">
                    </div>
                    <el-button @click="uploadImage('houseFullImage')" type="primary">上传房屋正面照</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitPlaceForm('placeForm')">提交
                    </el-button>
                    <el-button @click="cancel1">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>


        <!-- 图片预览弹窗 -->
        <el-dialog v-model="previewVisible" title="预览图片" width="70%" :before-close="handleClosePreview">
            <div style="display: flex;align-items: center;justify-content: center;">
                <img :src="previewImageUrl" style="max-height: 500px; max-width: 90%;">
            </div>
        </el-dialog>


    </div>
</template>
<script>
import { h, reactive, ref } from 'vue'
import request from "@/utils/request";
import axios from 'axios';
import { serverIp } from '@/ipConfig/config';

const ruleFormRef = ref()
export default {
    name: 'Place',
    components: {
        serverIp
    },
    data() {
        return {
            updateTypeId: "",
            search: "", //搜索
            typeId: "",
            // 弹窗增加表单
            placeTypeFrom: {
                name: '',
                placeDesc: '',
            },
            serverIp: serverIp,

            placeForm: {
                id: null,
                placeType: "",
                typeName: "",
                companyName: '',
                enterpriseType: '',
                companyAddress: "",
                companyLicense: "",
                companyLicenseImage: "",
                businessNature: "",
                legalPerson: "",
                legalPersonPhone: "",
                legalPersonImage: "",
                legalPersonPosition: "",
                responsePerson: "",
                responsePersonPhone: "",
                responsePersonImage: "",
                houseOwnership: "",
                houseOwnershipImage: "",
                houseArea: "",
                housePlie: "",
                houseFullImage: "",

            },
            // 非空校验
            rules: {
                placeType: [
                    {
                        required: true,
                        validator: (rule, value, callback) => {
                            // 更健壮的验证逻辑
                            const hasValidData =
                                (this.placeForm.placeType && this.placeForm.placeType.toString().trim() !== '') ||
                                (this.placeForm.typeName && this.placeForm.typeName.trim() !== '');

                            if (!hasValidData) {
                                callback(new Error('请选择或输入经营类别'));
                            } else {
                                callback();
                            }
                        },
                        trigger: 'blur'
                    }
                ],
                companyName: [
                    { required: true, message: '请输入单位名称', trigger: 'blur' },
                ],
                companyAddress: [
                    { required: true, message: '请输入单位地址', trigger: 'blur' },
                ],
                enterpriseType: [
                    { required: true, message: '请选择企业类型', trigger: 'blur' },
                ],
                companyLicense: [
                    { required: true, message: '请输入营业执照号', trigger: 'blur' },
                    { pattern: /^[0-9a-zA-Z]+$/, message: '无效字符', trigger: 'blur' },
                ],
                businessNature: [
                    { required: true, message: '请输入经营范围', trigger: 'blur' },
                ],
                legalPerson: [
                    { required: true, message: '请输入法定代表人', trigger: 'blur' },
                ],
                legalPersonPhone: [
                    { required: true, message: '请输入法定代表人联系方式', trigger: 'blur' },
                ],
                legalPersonPosition: [
                    { required: true, message: '请输入法定代表人职务', trigger: 'blur' },
                ],
                responsePerson: [
                    { required: true, message: '请输入负责人', trigger: 'blur' },
                ],
                responsePersonPhone: [
                    { required: true, message: '请输入负责人联系方式', trigger: 'blur' },
                ],
                houseOwnership: [
                    { required: true, message: '请输入房屋权属', trigger: 'blur' },
                ],
                houseArea: [
                    { required: true, message: '请输入建筑面积', trigger: 'blur' },
                    { pattern: /^[0-9.]+$/, message: '无效字符', trigger: 'blur' },
                ],
                housePlie: [
                    { required: true, message: '请输入建筑层数', trigger: 'blur' },
                    { pattern: /^[0-9]+$/, message: '无效字符', trigger: 'blur' },
                ],
            },
            // 弹窗关闭
            disvisable: false,
            disvisable1: false,
            isEdit: false,
            // 图片预览弹窗
            previewVisible: false,
            previewImageUrl: '',
            // 修改地点类别
            updatePlaceTypeDisvisable: false,
            // 分页数据
            currentPage: 1, //页码
            pageSize: 10, //页长
            total: 0,  //总表长
            rowId: 0,
            value: '',
            placeData: [],

            // 下拉框
            options: [],

            // 登录用户信息
            loginUserInfo: {
                id: '',
                responsibleScope: '', //查询范围
                roleLevel: '', //角色等级
                unitId: '', //内设部门ID
                userRole: '', //角色ID
                permissions: [], // 按钮路径（数据库中的path）
            },
            // 按钮权限
            permissionIsShow: {
                add: false,
                edit: false,
                delete: false,
            },
        }
    },

    mounted() {
        this.fetchOptions(); // 页面加载时获取选项数据
    },

    created() {
        const info = JSON.parse(localStorage.getItem("user"));
        this.loginUserInfo = {
            id: Number(info.id),
            responsibleScope: info.responsibleScope, //查询范围
            roleLevel: Number(info.roleLevel),
            unitId: Number(info.unitId),
            userRole: Number(info.userRole),
            permissions: info.permissions.filter(item => Number(item.menuId) === 36).map(item => item.path),
        }
        this.permissionIsShow = {
            add: this.loginUserInfo.permissions.includes('place-add'),
            edit: this.loginUserInfo.permissions.includes('place-edit'),
            delete: this.loginUserInfo.permissions.includes('place-delete'),
            resetPassword: this.loginUserInfo.permissions.includes('place-resetPassword'),
        }
        this.reqPlaceData(); //加载地点数据
    },

    methods: {
        handlePlaceTypeChange(value) {
            if (value) {
                // 检查是否是原始选项中的ID
                const existingOption = this.options.find(opt => opt.id === value);
                if (existingOption) {
                    // 选择原始选项：设置placeType为ID，清空typeName
                    this.placeForm.typeName = "";
                    this.placeForm.placeType = value;
                } else {
                    // 用户输入的新值或选择的新值
                    this.placeForm.typeName = value;
                    this.placeForm.placeType = "";
                    // 确保UI显示正确
                    this.$nextTick(() => {
                        this.placeForm.placeType = value;
                    });
                }
            } else {
                // 清空选择时，也清空相关字段
                this.placeForm.typeName = "";
                this.placeForm.placeType = "";
            }
        },

        handlePlaceTypeBlur(event) {
            const inputValue = event.target.value;
            // 情况1：选择操作（blur时值为空，但typeName有值）
            if (!inputValue && this.placeForm.typeName) {
                return;
            }
            // 情况2：直接输入后失去焦点（blur时有值，但change事件没处理过）
            if (inputValue && inputValue !== this.placeForm.typeName) {
                // 检查是否是原始选项中的名称
                const existingOption = this.options.find(opt => opt.name === inputValue);
                if (existingOption) {
                    this.placeForm.placeType = existingOption.id;
                    this.placeForm.typeName = "";
                    this.$nextTick(() => {
                        this.placeForm.placeType = existingOption.id;
                    });
                } else {
                    this.placeForm.typeName = inputValue;
                    this.placeForm.placeType = "";
                    this.$nextTick(() => {
                        this.placeForm.placeType = inputValue;
                    });
                }
                return;
            }
            // 情况3：真正清空操作
            if (!inputValue && !this.placeForm.typeName) {
                this.placeForm.typeName = "";
                this.placeForm.placeType = "";
            }
        },

        // 上传图片
        uploadImage(path) {
            // 创建文件选择输入
            const input = document.createElement('input');
            input.type = 'file';
            input.accept = 'image/*';

            input.onchange = async (e) => {
                const file = e.target.files[0];
                if (!file) return;

                // try {
                const formData = new FormData();
                formData.append('file', file, file.name);

                // 上传图片到服务器
                const response = await axios.post(serverIp + "/related-file/uploadSign", formData, {
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    }
                });

                // 处理响应
                if (response.data.code === '200') {
                    const fileUrl = `api/file/download/${response.data.data.url}`;
                    this.placeForm[path] = fileUrl;
                    // 提示信息
                    this.$message({
                        message: '图片上传成功',
                        type: 'success'
                    });

                } else {
                    this.$message({
                        message: '图片上传失败',
                        type: 'error'
                    });
                }
            };

            // 触发文件选择对话框
            input.click();
        },

        // 新增place
        addPlace() {
            // 清空数据
            this.placeForm = {
                id: null,
                placeType: "",
                typeName: "",
                companyName: '',
                enterpriseType: '',
                companyAddress: "",
                companyLicense: "",
                companyLicenseImage: "",
                businessNature: "",
                legalPerson: "",
                legalPersonPhone: "",
                legalPersonImage: "",
                legalPersonPosition: "",
                responsePerson: "",
                responsePersonPhone: "",
                responsePersonImage: "",
                houseOwnership: "",
                houseOwnershipImage: "",
            }
            this.placeForm.id = null
            this.disvisable1 = true
            this.isEdit = false
        },
        // 导入辖区单位
        importPlace() {
            // 创建隐藏的文件输入元素
            const fileInput = document.createElement('input');
            fileInput.type = 'file';
            fileInput.accept = '.xlsx,.xls'; // 限制文件类型为Excel
            fileInput.style.display = 'none';

            // 添加change事件监听
            fileInput.addEventListener('change', (event) => {
                const file = event.target.files[0];
                if (file) {
                    this.uploadImportFile(file);
                }

                // 清理DOM
                document.body.removeChild(fileInput);
            });

            // 触发文件选择
            document.body.appendChild(fileInput);
            fileInput.click();
        },

        // 上传导入文件
        uploadImportFile(file) {
            // 检查文件类型
            const fileName = file.name;
            if (!fileName.endsWith('.xlsx') && !fileName.endsWith('.xls')) {
                this.$message.error('请上传Excel文件（.xlsx 或 .xls 格式）');
                return;
            }

            // 创建FormData对象
            const formData = new FormData();
            formData.append('file', file);

            // 获取token
            const userInfo = JSON.parse(localStorage.getItem('user')) || {};
            const token = userInfo.token || '';
            if (!token) {
                this.$message.error('未获取登录信息，请重新登录。');
                return;
            }
            // 发送请求
            axios.post(this.serverIp + "/place/importData", formData, {
                headers: {
                    'token': token,
                    'Content-Type': 'multipart/form-data'
                },
            }).then(response => {
                if (response.data.code === '200') {
                    this.$message.success('导入成功');
                    this.reqPlaceData();
                }
                else {
                    this.$message.error('导入失败');
                }
            }).catch(error => {
                console.error('导入错误:', error);
            });
        },

        // 下载导入模板
        downloadImportTemplate() {
            window.location.href = '/static/importTemplate/辖区单位导入模板.xlsx'
        },

        // 二级表单的提交
        submitPlaceForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    // 提交前清理数据，确保一致性
                    this.cleanFormData();

                    // 发送请求
                    request.post("/place/edit", this.placeForm).then(res => {
                        if (res.code === '500') {
                            this.$message({
                                type: "warning",
                                message: res.msg
                            })
                        } else if (res.code === '200') {
                            this.$message({
                                type: "success",
                                message: "提交成功"
                            })
                            this.fetchOptions();
                            this.reqPlaceData();
                            this.handleClose();
                        }
                    })
                } else {
                    this.$message.warning("请填写完整表单")
                }
            });
        },

        // 清理表单数据，确保一致性
        cleanFormData() {
            // 如果两个字段都有值，根据优先级清理
            if (this.placeForm.placeType && this.placeForm.typeName) {
                // 优先使用现有类别（如果placeType是有效的ID）
                const existingOption = this.options.find(opt => opt.id === this.placeForm.placeType);
                if (existingOption) {
                    this.placeForm.typeName = ""; // 清空自定义输入
                } else {
                    this.placeForm.placeType = ""; // 如果placeType不是有效ID，使用自定义输入
                }
            }
        },
        // 分页
        handleSizeChange(val) {
            this.pageSize = val;
            this.reqPlaceData();
        },
        handleCurrentChange(val) {
            this.currentPage = val;
            this.reqPlaceData();
        },

        // 删除地点
        deletePlace(val) {
            this.$confirm('是否确定删除辖区单位?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                showClose: false,
                type: 'warning'
            }).then(() => {
                request.get("/place/delete/" + val).then(res => {
                    if (res.code == "200") {
                        this.$message({
                            type: "success",
                            message: "删除成功"
                        })
                        this.reqPlaceData();
                    }
                })
            })
                .catch(() => {
                });
        },

        // 取消请空表单数据
        cancel() {
            this.disvisable = false;
            this.handleClose1();
        },

        cancel1() {
            this.disvisable1 = false;
            this.handleClose();
        },

        // 编辑表单数据
        editPlace(val) {
            this.disvisable1 = true;
            this.isEdit = true;
            request.get("/place/" + val).then(res => {
                this.placeForm = res.data;

                // 确保编辑时数据正确显示
                if (this.placeForm.typeName) {
                    // 如果有自定义类别名称，说明是自定义输入
                    this.$nextTick(() => {
                        this.placeForm.placeType = this.placeForm.typeName;
                    });
                } else if (this.placeForm.placeType) {
                    // 如果是现有类别，确保placeType是有效的ID
                    const existingOption = this.options.find(opt => opt.id === this.placeForm.placeType);
                    if (!existingOption) {
                        // 如果ID在选项中不存在，可能是数据问题，清空
                        this.placeForm.placeType = "";
                    }
                }
            })
        },

        // 关闭弹窗清空数据
        handleClose1() {
            this.$refs.placeTypeFrom.resetFields()
            this.disvisable = false
            this.updatePlaceTypeDisvisable = false
            this.updateTypeId = ""
            this.placeTypeFrom = {}
            this.fetchOptions()
        },

        handleClose() {
            this.$refs.placeForm.resetFields()
            this.disvisable1 = false
        },

        // 地点类别数据
        fetchOptions() {
            request.get('/place-type/allType') // 发送GET请求到后台接口
                .then(response => {
                    this.options = response.data;
                })
                .catch(error => {
                    console.error(error);
                });
        },

        // 分页请求
        reqPlaceData() {
            request.get("/place/findPage?pageNum=" + this.currentPage
                + "&pageSize=" + this.pageSize + "&param=" + this.search + "&typeId=" + this.typeId).then(res => {
                    if (res.code == '200') {
                        this.placeData = res.data.records;
                        this.total = res.data.total;
                    }
                })
        },

        // 预览图片
        previewImage(url) {
            this.previewVisible = true;
            this.previewImageUrl = url;
        },

        // 重置密码
        resetPassword(row) {
            // 询问是否重置密码
            this.$confirm('是否重置密码为123456?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                showClose: false,
                type: 'warning'
            }).then(() => {
                request.get("/place/resetPassword", {
                    params: {
                        id: row.id
                    }
                }).then(res => {
                    if (res.code === '200') {
                        this.$message({
                            type: "success",
                            message: "重置成功"
                        })
                        this.reqAccountData();
                    }
                })
            })
                .catch(() => {
                });
        },
    },
}

</script>
<style scoped>
#roleSpan {
    color: black;
    text-decoration: none;
}

/*   外框架   */
.framework1 {
    height: calc(100vh - 88px);
    width: calc(100vh - 200px);
    margin-left: 8px;
    border: solid 1px #D3D3D3;
}

/*   内框架   */
.framework2 {
    height: calc(100vh - 92px);
    border: solid 1px #D3D3D3;
}

/*   表格大标题   */
.header {
    font-size: 16px;
    font-weight: bold;
    padding: 4px 20px;
    background-color: #D3D3D3;
}

/*   表格按键组   */
.button_group {
    padding: 4px 10px;
    background-color: #DDDDDD;
}

/*   表格分页处   */
.footer {
    padding: 4px 10px;
    background-color: #f4f3f9;
}

.el-dialog-image {
    height: 100px;
    width: 200px;
    margin-top: 10px;
    margin-right: 10px;
    border: 1px solid #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
}

:deep(.el-form-item__label) {
    line-height: 18px;
}
</style>
